<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="可用" rightName="记录" rightPath="/account/wallet/usableList" mtClass="no-bg"/>
        <div class="content">
            <div class="text">可用（RB）</div>
            <div class="money">{{ num }}</div>
            <div class="unlock-num bottom-border">
                <input class="unlock-num-input" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" v-model="inputValueNum" placeholder="锁定数量">
            </div>
            <div class="rang-unlock">
                <input type="range" v-model="inputValueNum" :max="numInt" min=0 step=1 :style="{'background-size':num<1?'0% 0%':inputValueNum*100/numInt+'% 100%'}"/>
            </div>
            <div class="tips">
                <div v-show="inputValueNum>num">输入数量超过可用的数量</div>
                <div v-show="inputValueNum<1">输入数量不能小于1</div>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValueNum<=numInt&&inputValueNum>=1&&(num>=1))?false:true" @click.native="handle">锁定</mt-button>
        </div>
        <div class="tips">
            <p>提示：</p>
            <p>1、可用是指可用自由使用的RB，如提现、兑换应用商城物品等。</p>
            <p>2、锁定RB的多少决定用户在社区的权重。锁币越多，权益越大。</p>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import { Toast } from 'mint-ui';
import { PostUnlock } from '@/api/api'
export default {
  data() {
    return {
        num:0,
        numInt:null,
        inputValueNum:null,
        isShow:false
    }
  },
  components:{
    mtHeader
  },
  mounted(){
    this.num = Number(this.$route.query.availableDlb);
    this.numInt = Math.floor(this.num);
    this.inputValueNum = this.numInt
  },
  methods: {
    handle(){
        PostUnlock({
            lockType:'0',  //0:锁定，1：解锁
            unlockCount:this.inputValueNum
        }).then(res => {
            if( res.code == 200 ){
                Toast({
                    message: "锁定成功"
                });
                this.$router.back(-1);
            }else{
                Toast({
                    message: res.msg,
                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                })
            }
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper{
   .content{
        padding:20px 15px 0;
        .text{
            color:#bfbfbf;
            font-size: 13px;
        }
        .money{
            margin-top: 30px;
            font-weight: bold;
            text-align: center;
            color:#333333;
            font-size: 24px;
        }
        .unlock-num{
            .unlock-num-input{
                margin-top: 20px;
                height:50px;
                font-size: 14px;
                border-bottom: 1px solid #F4F5FA;
            }
        }
        .rang-unlock{
            margin-top:20px;
        }
        .tips{
            height:20px;
            padding:0px;
            color:#ec3333;
            margin-top:10px;
        }
    }
    .default-btn{
        margin-top:10px;
    }
    .tips{
        font-size:13px;
        color:#BFBFBF;
        line-height:20px;
        padding:0 15px;
    }
}
</style>
